<html>
    <head>
        <meta charset="UTF-8">
        <title>全选练习</title>
        <script type="text/javascript">
            window.onload = function()
            {
                //获取四个多选框
                var items = document.getElementsByName("items");

                var checkedAllBox = document.getElementById("checkedAllBox")
                checkedAllBox.onclick = function()
                {
                    //设置为选中状态
                    for(var i = 0 ; i <items.length ; i++)
                    {
                        items[i].checked = this.checked;
                    }
                }

                var checkedAllBtn = document.getElementById("checkedAllBtn")
                checkedAllBtn.onclick = function()
                {
                    //设置为选中状态
                    for(var i = 0 ; i <items.length ; i++)
                    {
                        items[i].checked = true;
                    }
                    checkedAllBox.checked = true;
                }

                var checkedNoBtn = document.getElementById("checkedNoBtn")
                checkedNoBtn.onclick = function()
                {
                    //设置为没有选中状态
                    for(var i = 0 ; i <items.length ; i++)
                    {
                        items[i].checked = false;
                    }
                    checkedAllBox.checked = false;
                }

                var checkedRevBtn = document.getElementById("checkedRevBtn")
                checkedRevBtn.onclick = function()
                {
                    //设置为选中状态
                    for(var i = 0 ; i <items.length ; i++)
                    {
                        items[i].checked = !items[i].checked;
                    }
                }

                var sendBtn = document.getElementById("sendBtn")
                sendBtn.onclick = function()
                {
                    //设置为选中状态
                    for(var i = 0 ; i <items.length ; i++)
                    {
                        if(items[i].checked)
                        {
                            alert(items[i].value);
                        }
                    }
                }

                for(var i = 0 ; i <items.length ; i++)
                {
                    items[i].onclick = function()
                    {
                        checkedAllBox.checked = true;
                        for(var j = 0 ; j <items.length ; j++)
                        {
                            if(!items[j].checked)
                            {
                                checkedAllBox.checked = false;
                                break;
                            }
                        }
                    }        
                }
            }
        </script>
    </head>

    <body>
      <form method="post" action="">
          你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
          <br />
          <input type="checkbox" name = "items" value = "足球" />足球
          <input type="checkbox" name = "items" value = "篮球" />篮球
          <input type="checkbox" name = "items" value = "羽毛球" />羽毛球
          <input type="checkbox" name = "items" value = "乒乓球" />乒乓球
          <br />
          <input type="button" id = "checkedAllBtn" value = "全 选" />
          <input type="button" id = "checkedNoBtn" value = "全不选" />
          <input type="button" id = "checkedRevBtn" value = "反 选" />
          <input type="button" id = "sendBtn" value = "提 交" />
      </form>
    </body>
</html>